<template>
    <a-form ref="formRef" layout="horizontal" auto-label-width :model="dataForm">
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="打样单号" field="proofingOdd" :rules="[{ required: true, message: '打样单号必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input v-model="dataForm.proofingOdd" class="bacClass" disabled />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="打样日期" field="proofingDate" :rules="[{ required: true, message: '打样日期必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-date-picker  popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.proofingDate" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="客户名称" field="clientName" :rules="[{ required: true, message: '客户名称必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" @change="changeClient" v-model="dataForm.clientName"
                        allow-clear @search="searchHandler($event, 9)" allow-search :loading="loading"
                        :filter-option="false" @focus="selectChangeData(9)">
                        <a-option v-for="item in selectData.customerNameList" :key="item.id" :value="item.customName">{{
                            item.customName }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="业务员">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.salesman" allow-clear
                        @search="searchHandler($event, 12)" allow-search :loading="loading" :filter-option="false"
                        @focus="selectChangeData(12)">
                        <a-option v-for="item in selectData.hrEmployeeList" :key="item.id" :value="item.name">{{ item.name
                        }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="颜色" field="colour">
                    <input type="color" style="width: 270px;" v-model="dataForm.colour" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="客来版编号">
                    <a-input v-model="dataForm.versionCode" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="色卡规格">
                    <a-input v-model="dataForm.atlaSpecification" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="客订名称">
                    <a-input v-model="dataForm.guestName" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="成分">
                    <a-input v-model="dataForm.ingredient" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="色号" field="colourNumber" :rules="[{ required: true, message: '色号必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input v-model="dataForm.colourNumber" class="bacClass" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="色称" field="colorAnomia" :rules="[{ required: true, message: '色称必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input v-model="dataForm.colorAnomia" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="客户色号">
                    <a-input v-model="dataForm.clientColour" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="布号" field="clothNo" :rules="[{ required: true, message: '布号必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.clothNo" allow-clear
                        @search="searchHandler($event, 17)" @change="changeCode(dataForm.clothNo)" allow-search
                        :loading="loading" :filter-option="false" @focus="selectChangeData(17)">
                        <a-option v-for="item in selectData.clothList" :key="item.id" :value="item.clothCode">{{
                            item.clothCode
                        }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="品名" field="descriptionName" :rules="[{ required: true, message: '品名必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input v-model="dataForm.descriptionName" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="纱支">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.yarnCount" allow-clear
                        @search="searchHandler($event, 18)" allow-search :loading="loading" :filter-option="false"
                        @focus="selectChangeData(18)">
                        <a-option v-for="item in selectData.yarnCountList" :key="item.id" :value="item.yarnCount">{{
                            item.yarnCount
                        }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="打样员" field="prooferOperator" :rules="[{ required: true, message: '打样员必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.prooferOperator" allow-clear
                        @search="searchHandler($event, 12)" allow-search :loading="loading" :filter-option="false"
                        @focus="selectChangeData(12)">
                        <a-option v-for="item in selectData.hrEmployeeList" :key="item.id" :value="item.name">{{
                            item.name }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="来样日期">
                    <a-date-picker  popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.suppliedDate" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="交样日期">
                    <a-date-picker  popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.makeDate" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <!-- <a-form-item label="复样日期">
                    <a-date-picker  popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.duplicateDate" />
                </a-form-item> -->
                <a-form-item label="成本等级(超6元)">
                    <a-input-number v-model="dataForm.costClass" :min="0" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="对色光源" field="coloringLight">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.coloringLight"
                        @search="searchHandler($event, 1)" allow-search :loading="loading" :filter-option="false"
                        allow-clear @focus="selectChangeData(1)">
                        <a-option v-for="item in selectData.colorLightList" :key="item.id" :value="item.colourLight">{{
                            item.colourLight }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="色系" field="colourScheme" :rules="[{ required: true, message: '色系必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.colourScheme"
                        @search="searchHandler($event, 2)" allow-search :loading="loading" :filter-option="false"
                        allow-clear @focus="selectChangeData(2)">
                        <a-option v-for="item in selectData.colorSchemeList" :key="item.id" :value="item.colourScheme">{{
                            item.colourScheme }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="测试标准" field="testStandard">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.testStandard"
                        @search="searchHandler($event, 6)" allow-search :loading="loading" :filter-option="false"
                        allow-clear @focus="selectChangeData(6)" @change="changeOUT">
                        <a-option v-for="item in selectData.testStandarList" :key="item.id" :value="item.verifyStandard">{{
                            item.verifyStandard }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="客户确认">
                    <a-input v-model="dataForm.clientAffirm" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="工艺时间">
                    <a-input-number v-model="dataForm.craftDate" :min="0" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="作业类型" field="jobType" :rules="[{ required: true, message: '作业类型必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.jobType"
                        @search="searchHandler($event, 15)" allow-search :loading="loading" :filter-option="false"
                        allow-clear @focus="selectChangeData(15)">
                        <a-option v-for="item in selectData.objTypeList" :key="item.id" :value="item.jobType">{{
                            item.jobType }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="打样班组" field="drawTeam" :rules="[{ required: true, message: '打样班组必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.drawTeam" allow-search
                        :loading="loading" :filter-option="false" @search="searchHandler($event, 3)" allow-clear
                        @focus="selectChangeData(3)">
                        <a-option v-for="item in selectData.proofGroupList" :key="item.id" :value="item.proofingGroup">{{
                            item.proofingGroup }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="英文色称">
                    <a-input v-model="dataForm.engColourName" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="客户意见">
                    <a-input v-model="dataForm.clientOpinion" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="颜色深浅" field="colourDepth" :rules="[{ required: true, message: '颜色深浅必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.colourDepth" allow-search
                        :loading="loading" :filter-option="false" allow-clear @search="searchHandler($event, 4)"
                        @focus="selectChangeData(4)">
                        <a-option v-for="item in selectData.shadeList" :key="item.id" :value="item.shade">{{ item.shade
                        }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="用坯深浅" field="wearDepth">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.wearDepth"
                        @search="searchHandler($event, 13)" allow-search :loading="loading" :filter-option="false"
                        allow-clear @focus="selectChangeData(13)">
                        <a-option v-for="item in selectData.shadeList" :key="item.id" :value="item.greyDepth">{{
                            item.greyDepth }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="用纱深浅" field="alkaliDepth">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.alkaliDepth"
                        @search="searchHandler($event, 14)" allow-search :loading="loading" :filter-option="false"
                        allow-clear @focus="selectChangeData(14)">
                        <a-option v-for="item in selectData.shadeList" :key="item.id" :value="item.yarnDepth">{{
                            item.yarnDepth }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="前处理项目">
                    <!-- <a-input-number v-model="" :min="0" class="bacClass" /> -->
                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.programType" @search="searchHandler($event, 10)"
                        allow-search :loading="loading" :filter-option="false" allow-clear @focus="selectChangeData(10)"
                        @change="changeProgram">
                        <a-option v-for="item in selectData.programNoList" :key="item.id" :value="item.programNumber">{{
                            item.programNumber }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="前处理成本">
                    <a-input-number :precision="2" v-model="dataForm.costPretreatment" @change="changecostPrentment"
                        :min="0" class="bacClass" />
                </a-form-item>
            </a-col>

            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="合计成本">
                    <a-input-number :precision="2" v-model="dataForm.totalCost" :min="0" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="染料浓度">
                    <a-input-number v-model="dataForm.dyeStrength" :min="0.01" :step="0.01" class="bacClass" />
                </a-form-item>
            </a-col>

        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="耐氧提升剂">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.oxidative">
                        <a-option value="三级">三级</a-option>
                        <a-option value="三级以上">三级以上</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="耐氧提升剂用量">
                    <a-input-number v-model="dataForm.oxidativeDosage" :min="0" class="bacClass" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="备注" field="remark">
                    <a-input v-model="dataForm.remark" class="bacClass" />
                </a-form-item>
            </a-col>

            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-row justify="center">
                    <a-col :span="7"> <a-checkbox :value="1" :default-checked="dataForm.sensitiveColor != 1 ? false : true"
                            @change="dataForm.sensitiveColor = $event ? 1 : 0"> 敏感色 </a-checkbox></a-col>
                    <a-col :span="7"> <a-checkbox :value="1" :default-checked="dataForm.testColor != 1 ? false : true"
                            @change="dataForm.testColor = $event ? 1 : 0"> 测试色号 </a-checkbox> </a-col>
                    <a-col :span="7">
                        <a-checkbox :value="1" :default-checked="dataForm.rummage != 1 ? false : true"
                            @change="dataForm.rummage = $event ? 1 : 0"> 是否翻打 </a-checkbox> </a-col>
                    <a-col :span="7">
                        <a-checkbox :value="1" :default-checked="dataForm.wipeCharge != 1 ? false : true"
                            @change="dataForm.wipeCharge = $event ? 1 : 0"> 湿擦收费 </a-checkbox></a-col>
                    <a-col :span="7"> <a-checkbox :value="1"
                            :default-checked="dataForm.colorDropCylinder != 1 ? false : true"
                            @change="dataForm.colorDropCylinder = $event ? 1 : 0"> 对色落缸 </a-checkbox> </a-col>
                    <a-col :span="7"> <a-checkbox :value="1" :default-checked="dataForm.variable != 1 ? false : true"
                            @change="dataForm.variable = $event ? 1 : 0"> 无布 </a-checkbox></a-col>
                    <a-col :span="7"> <a-checkbox :value="1" :default-checked="dataForm.sealCard != 1 ? false : true"
                            @change="dataForm.sealCard = $event ? 1 : 0"> 不封卡 </a-checkbox> </a-col>
                    <a-col :span="7"> <a-checkbox :value="1" :default-checked="dataForm.colourSample != 1 ? false : true"
                            @change="dataForm.colourSample = $event ? 1 : 0"> 无色样 </a-checkbox></a-col>
                </a-row>
            </a-col>
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-row justify="center">
                    <a-col :span="8"> <a-checkbox :value="1" :default-checked="dataForm.polishRod != 1 ? false : true"
                            @change="dataForm.polishRod = $event ? 1 : 0"> 高日晒/光杆 </a-checkbox> </a-col>
                    <a-col :span="8"> <a-checkbox :value="1"
                            :default-checked="dataForm.sensitivityColor != 1 ? false : true"
                            @change="dataForm.sensitivityColor = $event ? 1 : 0"> 特敏感色 </a-checkbox></a-col>
                    <a-col :span="6"> <a-checkbox :value="1" :default-checked="dataForm.topQuality != 1 ? false : true"
                            @change="dataForm.topQuality = $event ? 1 : 0"> 一等品 </a-checkbox> </a-col>
                    <a-col :span="6"> <a-checkbox :value="1" :default-checked="dataForm.dialPrinting != 1 ? false : true"
                            @change="dataForm.dialPrinting = $event ? 1 : 0"> 拨印 </a-checkbox></a-col>
                    <a-col :span="6"> <a-checkbox :value="1" :default-checked="dataForm.fluorescent != 1 ? false : true"
                            @change="dataForm.fluorescent = $event ? 1 : 0"> 荧光料 </a-checkbox></a-col>
                    <a-col :span="6"> <a-checkbox :value="1" :default-checked="dataForm.blueMaterial != 1 ? false : true"
                            @change="dataForm.blueMaterial = $event ? 1 : 0"> 彩蓝料 </a-checkbox></a-col>
                </a-row>
            </a-col>
        </a-row>
        <!-- <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                
            </a-col>
        </a-row> -->
        <!-- <a-row :gutter="20" justify="space-between" style="">
               <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                <a-form-item label="打样时间">
                    <a-select popup-container="html"  style="width: 270px;" class="bacClass" v-model="dataForm.proofingTime">
                        <a-option :value="0">准时</a-option>
                        <a-option :value="1">延期</a-option>
                    </a-select>
                </a-form-item>
            </a-col> 
        </a-row> -->
    </a-form>
    <a-divider type="dashed" />
    <a-row justify="space-between" style="margin-bottom: 20px">
        <a-col :span="2">
            <a-tag size="large" color="#168cff">打板工艺</a-tag>
        </a-col>
        <a-col :span="10" style="text-align:right;">
            <!-- <a-button type="primary" @click="selectBattle">取工艺信息</a-button> -->
            <a-button type="primary" @click="calcauscateCosts" style="margin:0 20px 0px 20px">计算成本</a-button>
            <el-button type="success" :icon="iconText.CirclePlus"
                @click="pageData.battledoreMessageOneList.push({ ...battOne })" style="background:#67c23a ;">增行</el-button>
        </a-col>

    </a-row>

    <a-table :bordered="{ cell: true }" :columns="battleOneColumns" :scrollbar="scrollbar"
        :data="pageData.battledoreMessageOneList" :pagination="false" @expanded-change="hasTableChange"
        @row-click="hasTableChange">
        <template #processName="{ rowIndex }">
            <a-select popup-container="html"  class="bacClass" v-model="pageData.battledoreMessageOneList[rowIndex].processName"
                @search="searchHandler($event, 16)" allow-search :loading="loading" :filter-option="false" allow-clear
                @focus="selectChangeData(16)">
                <a-option v-for="item in selectData.dyeProceeList" :key="item.id" :value="item.processName">{{
                    item.processName }}</a-option>
            </a-select>
        </template>
        <template #programNumber="{ rowIndex }">
            <a-select popup-container="html"  class="bacClass" v-model="pageData.battledoreMessageOneList[rowIndex].programNumber"
                @search="searchHandler($event, 10)" allow-search :loading="loading" :filter-option="false" allow-clear
                @focus="selectChangeData(10)" @change="changeBattle($event, rowIndex)">
                <a-option v-for="item in selectData.programNoList" :key="item.id" :value="item.programNumber">{{
                    item.programNumber }}</a-option>
            </a-select>
        </template>
        <template #programName="{ rowIndex }">
            <a-select popup-container="html"  class="bacClass" v-model="pageData.battledoreMessageOneList[rowIndex].programName"
                @search="searchHandler($event, 19)" allow-search :loading="loading" :filter-option="false" allow-clear
                @focus="selectChangeData(19)">
                <a-option v-for="item in selectData.programNameList" :key="item.id" :value="item.programName">{{
                    item.programName }}</a-option>
            </a-select>
        </template>
        <template #processingStep="{ rowIndex }">
            <a-input class="bacClass" v-model="pageData.battledoreMessageOneList[rowIndex].processingStep" />
        </template>
        <template #effectsCode="{ rowIndex }">
            <a-popover position="bl" trigger="click">
                <a-input-search class="bacClass" v-model="pageData.battledoreMessageOneList[rowIndex].effectsCode"
                    @input="searchHandler($event, 20)" @click="searchHandler('', 20)" @change="changeEff" />
                <template #content>
                    <p class="clickEvent" v-for="item in selectData.processList" @click="() => {
                        pageData.battledoreMessageOneList[rowIndex].effectsCode = item.materialCode;
                        pageData.battledoreMessageOneList[rowIndex].effectsName = item.materialName
                    }">
                        {{ item.materialCode + '——' + item.materialName }}
                    </p>
                </template>
            </a-popover>
        </template>
        <template #effectsName="{ rowIndex }">
            <a-popover position="bl" trigger="click">
                <a-input-search class="bacClass" v-model="pageData.battledoreMessageOneList[rowIndex].effectsName"
                    @input="searchHandler($event, 21)" @click="searchHandler('', 21)" />
                <template #content>
                    <p class="clickEvent" v-for="item in selectData.processList" @click="() => {
                        pageData.battledoreMessageOneList[rowIndex].effectsCode = item.materialCode;
                        pageData.battledoreMessageOneList[rowIndex].effectsName = item.materialName
                    }">
                        {{ item.materialName + '——' + item.materialCode }}
                    </p>
                </template>
            </a-popover>
        </template>
        <template #totalConcentration="{ rowIndex }">
            <a-input-number :min="0" v-model="pageData.battledoreMessageOneList[rowIndex].totalConcentration"
                class="bacClass" />
        </template>
        <template #materials="{ rowIndex }">
            <a-input-number class="bacClass" :min="0" v-model="pageData.battledoreMessageOneList[rowIndex].materials" />
        </template>
        <template #concentration="{ rowIndex }">
            <a-input-number class="bacClass" :min="0" v-model="pageData.battledoreMessageOneList[rowIndex].concentration"
                @change="changeConcen" />
        </template>
        <template #concentrationUnit="{ rowIndex }">
            <a-input class="bacClass" v-model="pageData.battledoreMessageOneList[rowIndex].concentrationUnit" />
        </template>
        <template #temperature="{ rowIndex }">
            <a-input-number class="bacClass" :step="1" :min="0.01" :precision="2"
                v-model="pageData.battledoreMessageOneList[rowIndex].temperature" />
        </template>
        <template #schedule="{ rowIndex }">
            <a-input v-model="pageData.battledoreMessageOneList[rowIndex].schedule" class="bacClass" />
        </template>
        <template #unitPrice="{ rowIndex }">
            <a-input-number :step="1" :min="0.01" :precision="2"
                v-model="pageData.battledoreMessageOneList[rowIndex].unitPrice" class="bacClass" />
        </template>
        <template #money="{ rowIndex }">
            <a-input-number :step="1" :min="0.01" :precision="2" v-model="pageData.battledoreMessageOneList[rowIndex].money"
                class="bacClass" @change="changeMoney" />
        </template>
        <template #remark="{ rowIndex }">
            <a-input type="text" v-model="pageData.battledoreMessageOneList[rowIndex].remark" class="bacClass" />
        </template>
        <template #action="{ rowIndex }" v-if="pageData.battledoreMessageOneList.length > 1">
            <el-button type="danger" @click="pageData.battledoreMessageOneList.splice(rowIndex, 1)" link>删除</el-button>
        </template>
    </a-table>
    <a-divider type="dashed" />
    <a-tabs   :lazy-load="true" type="card-gutter" :border="false" @change="changeTbs">
        <template #extra>
            <el-button v-if="tabsKey !== 3" type="success" :icon="iconText.CirclePlus" @click="addCheck"
                style="margin-bottom: 10px;background:#67c23a ;">增行</el-button>
        </template>
        <a-tab-pane :key="1" title="打板信息">
            <a-table :columns="battleTwoColumns" v-model:selectedKeys="pageData.selectedKeys" :scrollbar="scrollbar" stripe
                :data="dataForm.battledoreMessageTwoList" :pagination="false" :row-selection="{ type: 'radio' }"
                row-key="rowIndex" @selection-change="changeTwoItem">
                <template #colorclass="{ rowIndex }">
                    <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.battledoreMessageTwoList[rowIndex].colorclass"
                        allow-clear @search="searchHandler($event, 5)" allow-search :loading="loading"
                        :filter-option="false" @focus="selectChangeData(5)">
                        <a-option v-for="item in selectData.colorClassList" :key="item.id" :value="item.affirmColorClass">{{
                            item.affirmColorClass }}</a-option>
                    </a-select>
                </template>
                <template #affirm="{ rowIndex }">
                    <a-input type="text" v-model="dataForm.battledoreMessageTwoList[rowIndex].affirm" class="bacClass" />
                </template>
                <template #desire="{ rowIndex }">
                    <a-input-number :step="1" :min="0.01" :precision="2"
                        v-model="dataForm.battledoreMessageTwoList[rowIndex].desire" class="bacClass" />
                </template>
                <template #costDyeing="{ rowIndex }">
                    <a-input-number :step="1" :min="0.01" :precision="2"
                        v-model="dataForm.battledoreMessageTwoList[rowIndex].costDyeing" class="bacClass" />
                </template>
                <template #remark="{ rowIndex }">
                    <a-input type="text" v-model="dataForm.battledoreMessageTwoList[rowIndex].remark" class="bacClass" />
                </template>
                <template #action="{ rowIndex }" v-if="dataForm.battledoreMessageTwoList.length > 1">
                    <el-button type="danger" @click="deleteBattTwo(rowIndex)" link>删除</el-button>
                </template>
            </a-table>
        </a-tab-pane>
        <a-tab-pane :key="2" title="客户要求">
            <a-table :columns="clientsColumns" :scrollbar="scrollbar" stripe :data="dataForm.clientsRequirementList"
                :pagination="false" :bordered="{ cell: true }">
                <template #informationList="{ rowIndex }">
                    <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.clientsRequirementList[rowIndex].informationList"
                        allow-clear @search="searchHandler($event, 8)" allow-search :loading="loading"
                        :filter-option="false" @focus="selectChangeData(8)">
                        <a-option v-for="item in selectData.custProjectList" :key="item.id" :value="item.classify">{{
                            item.classify }}</a-option>
                    </a-select>
                </template>
                <template #customerRequiredValue="{ rowIndex }">
                    <a-input type="text" v-model="dataForm.clientsRequirementList[rowIndex].customerRequiredValue"
                        class="bacClass" />
                </template>
                <template #testMethod="{ rowIndex }">
                    <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.clientsRequirementList[rowIndex].testMethod"
                        allow-clear @search="searchHandler($event, 7)" allow-search :loading="loading"
                        :filter-option="false" @focus="selectChangeData(7)">
                        <a-option v-for="item in selectData.testMethodList" :key="item.id" :value="item.verifyMethod">{{
                            item.verifyMethod }}</a-option>
                    </a-select>
                </template>
                <template #remark="{ rowIndex }">
                    <a-input type="text" v-model="dataForm.clientsRequirementList[rowIndex].remark" class="bacClass" />
                </template>
                <template #fastnessReporting="{ rowIndex }">
                    <a-input type="text" v-model="dataForm.clientsRequirementList[rowIndex].fastnessReporting"
                        class="bacClass" />
                </template>
                <template #explain="{ rowIndex }">
                    <a-input type="text" v-model="dataForm.clientsRequirementList[rowIndex].explain" class="bacClass" />
                </template>
                <template #action="{ rowIndex }" v-if="dataForm.clientsRequirementList.length > 1">
                    <el-button type="danger" @click="dataForm.clientsRequirementList.splice(rowIndex, 1)"
                        link>删除</el-button>
                </template>
            </a-table>
        </a-tab-pane>
        <a-tab-pane :key="3" title="营销落办信息">
            <!-- Content of Tab Panel 3 -->
            <a-form auto-label-width :model="dataForm.marketingMessageList[0]">
                <a-row :gutter="20" justify="center">
                    <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                        <a-form-item label="落办单号">
                            <a-input v-model="dataForm.marketingMessageList[0].landingOrde" class="bacClass" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                        <a-form-item label="落办ID">
                            <a-input-number v-model="dataForm.marketingMessageList[0].landingId" :min="0"
                                class="bacClass" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                        <a-form-item label="销售色号">
                            <a-input v-model="dataForm.marketingMessageList[0].salesColor" class="bacClass" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                        <a-form-item label="销售布号">
                            <a-input v-model="dataForm.marketingMessageList[0].salesCloth" class="bacClass" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="12" :lg="12" :md="12" :xs="24">
                        <a-form-item label="销售品名">
                            <a-input v-model="dataForm.marketingMessageList[0].salesDescription" class="bacClass" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-tab-pane>
        <a-tab-pane :key="4" title="牢度信息">
            <a-table :columns="fanstMessColumns" :pagination="false" :scrollbar="scrollbar" stripe
                :data="dataForm.fastnessMessageList">
                <template #project="{ rowIndex }">
                    <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.fastnessMessageList[rowIndex].project" allow-clear
                        allow-create>
                        <a-option value="洗水">洗水</a-option>
                        <a-option value="水渍">水渍</a-option>
                        <a-option value="汗渍">汗渍</a-option>
                        <a-option value="干擦">干擦</a-option>
                        <a-option value="湿擦">湿擦</a-option>
                        <a-option value="日晒">日晒</a-option>
                    </a-select>

                </template>
                <template #projectValue="{ rowIndex }">
                    <a-input-number :min="0" v-model="dataForm.fastnessMessageList[rowIndex].projectValue"
                        class="bacClass" />
                </template>
                <template #action="{ rowIndex }" v-if="dataForm.fastnessMessageList.length > 1">
                    <el-button type="danger" @click="dataForm.fastnessMessageList.splice(rowIndex, 1)" link>删除</el-button>
                </template>
            </a-table>
        </a-tab-pane>
    </a-tabs>
    <a-divider type="dashed" />
    <template v-if="dataForm.rummage === 1">
        <a-tag size="large" color="#168cff">翻打信息</a-tag>
        <a-table style="margin-top: 20px;" :columns="overMessageColumns" :scrollbar="scrollbar" stripe
            :data="dataForm.overthrowMessageList" :pagination="false">
            <template #sampleMaker="{ rowIndex }">
                <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.overthrowMessageList[rowIndex].sampleMaker" allow-clear
                    @search="searchHandler11($event)" allow-search :loading="loading" :filter-option="false"
                    @focus="searchHandler11('')">
                    <a-option v-for="item in selectData.employeeList" :key="item.id" :value="item.name">{{ item.name
                    }}</a-option>
                </a-select>
            </template>
            <template #rummageDate="{ rowIndex }">
                <a-date-picker  popup-container="html"  v-model="dataForm.overthrowMessageList[rowIndex].rummageDate" />
            </template>
            <template #beatFinishedDate="{ rowIndex }">
                <a-date-picker  popup-container="html"  v-model="dataForm.overthrowMessageList[rowIndex].beatFinishedDate" />
            </template>
            <template #remark="{ rowIndex }">
                <a-input type="text" v-model="dataForm.overthrowMessageList[rowIndex].remark" class="bacClass" />
            </template>
        </a-table>
    </template>
</template> 
 
<script lang="ts">
import { post, get } from '@/api/http'
import { defineComponent, ref, reactive } from 'vue'
import { sourceType, ColorSystem, Shade, ProofingGroup, ColorClass } from '@/interface/basicDataInterface'
import { colorSouce, colorSystem, colorDepth, proofGroup, affirmColorClass, devFabricInfo } from '@/api/laboratory'
import { TestStandardInter, TestMethod } from '@/interface/physicalBasicData'
import { testStandard, testMethod } from '@/api/PhysicalSurveyRoom/basicDataApi'
import { useTableColumn } from '@/hooks/table'
import { FormInstance, Message } from '@arco-design/web-vue'
import { ProofMana, battledoreMessageOne, battledoreMessageTwo, clientsRequirement, fastnessMessage, overthrowMessage, marketingMessage } from '@/interface/proofManaInterface'
import { orderFn } from "@/api/laboratory/other"
import { CirclePlus } from '@element-plus/icons-vue'
import emitter from "@/hooks/useEventBus";
import dayjs from 'dayjs'
export default defineComponent({
    props: {
        dataForm: {
            type: Object,
            default: () => ({}),
            require: true,
        },
    },

    setup(props, { expose }) {
        // console.log(props.dataForm);
        const scrollbar = ref<boolean>(true);
        const options = ref<any>();
        const loading = ref(false);
        let selectData = reactive<{
            colorLightList: sourceType[],
            colorSchemeList: ColorSystem[],
            shadeList: Shade[],
            proofGroupList: ProofingGroup[],
            colorClassList: ColorClass[],
            custProjectList: any[], //客户要求项目 
            customerNameList: any[], //客户列表
            programNoList: any[], //程序号  
            testStandarList: TestStandardInter[],
            testMethodList: TestMethod[],
            employeeList: any[], //人员
            hrEmployeeList: any[], //人员架构
            objTypeList: any[], //作业类型
            dyeProceeList: any[], //
            clothList: any[], //布号列表
            yarnCountList: any[], //纱支列表
            programNameList: any[], //程序名称
            processList: any[], //工序列表
        }>({
            colorLightList: [],
            colorSchemeList: [],
            shadeList: [],
            proofGroupList: [],
            custProjectList: [],
            colorClassList: [],
            customerNameList: [],
            programNoList: [],
            testStandarList: [],
            testMethodList: [],
            employeeList: [],
            hrEmployeeList: [],
            objTypeList: [],
            dyeProceeList: [],
            clothList: [],
            yarnCountList: [],
            programNameList: [],
            processList: [], //工序列表
        });


        let battOne = reactive<battledoreMessageOne>({
            processName: '',
            programNumber: '',
            programName: '',
            processingStep: '',
            effectsCode: '',
            effectsName: '',
            totalConcentration: 0,
            materials: 0,
            concentration: 0,
            concentrationUnit: '',
            temperature: 0,
            schedule: "",
            unitPrice: 0,
            money: 0,
            remark: '',
        });

        const battTwo = reactive<battledoreMessageTwo>({
            colorclass: '',  //色类
            affirm: '', //确认
            desire: 0, //浴比
            costDyeing: 0, //染色成本(元/公斤)
            remark: '',  //备注
            rowIndex: 1,
            battledoreMessageOneList: [{ ...battOne }],
        });

        const clientsMent = reactive<clientsRequirement>({
            informationList: '',  //客户要求项目
            customerRequiredValue: '',  //客户要求值
            testMethod: '',  //测试方法
            remark: '', //备注
            fastnessReporting: '',  //报客牢度 
            explain: ''  //说明
        });

        const market = reactive<marketingMessage>({
            landingOrde: '',  //落办单号
            landingId: 0, //落办ID
            salesColor: '',  //销售色号
            salesCloth: '', //销售布号
            salesDescription: '', //销售品名
        });

        const fastMess = reactive<fastnessMessage>({
            project: '',
            projectValue: 0
        });

        const overMess = reactive<overthrowMessage>({
            sampleMaker: '',  //打样员
            rummageDate: '',  //翻打日期
            beatFinishedDate: '',  //翻打完成日期
            remark: '',  //备注
        });
        //下拉数据
        const pageData = reactive<{
            battledoreMessageOneList: battledoreMessageOne[],
            selectedKeys: any[],
            obListOP: any[]
        }>({
            battledoreMessageOneList: [{ ...battOne }],
            selectedKeys: [],
            obListOP: []
        })
        const dataForm = reactive<ProofMana>({
            id: null,
            proofingOdd: '',
            programType: '',
            proofingDate: '',
            clientName: '',
            salesman: '',
            colour: '#000',
            versionCode: '',
            atlaSpecification: '',
            guestName: '',
            ingredient: '',
            colorAnomia: '',
            clientColour: '',
            clothNo: '',
            descriptionName: '',
            colourNumber: '',
            yarnCount: '',
            prooferOperator: '',
            suppliedDate: '',
            makeDate: '',
            duplicateDate: '',
            coloringLight: '',
            colourScheme: '',
            testStandard: '',
            clientAffirm: '',
            craftDate: 0,
            jobType: '',
            drawTeam: '',
            engColourName: '',
            clientOpinion: '',
            colourDepth: '',
            wearDepth: '',
            alkaliDepth: '',
            costPretreatment: 0,
            totalCost: 0,
            dyeStrength: 0,
            oxidative: '',
            oxidativeDosage: 0,
            costClass: 0,
            sensitiveColor: 0,
            testColor: 0,
            rummage: 0,
            wipeCharge: 0,
            colorDropCylinder: 0,
            variable: 0,
            sealCard: 0,
            colourSample: 0,
            polishRod: 0,
            sensitivityColor: 0,
            topQuality: 0,
            dialPrinting: 0,
            fluorescent: 0,
            blueMaterial: 0,
            remark: '',
            // proofingTime:0,
            // battledoreMessageOneList: [{ ...battOne }],
            battledoreMessageTwoList: [{ ...battTwo }],
            clientsRequirementList: [{ ...clientsMent }],
            marketingMessageList: [{ ...market }],
            fastnessMessageList: [{ ...fastMess }],
            overthrowMessageList: [{ ...overMess }],
            battledoreCraftList: [],
        });
        const searchHandler = async (data: any, index: number) => {
            // if (data) {
            loading.value = true;
            await selectChangeData(index, data, (value: any) => {
                options.value = value
            });
            // console.log(await selectChangeData(index,data));
            loading.value = false;
            // } else {
            //     options.value = [];
            // }
        };
        const selectChangeData = async (orderInd: number, value: any = "", cb = (value: any) => { return value }) => {
            switch (orderInd) {
                case 1:
                    //获取对色光源下拉列表信息
                    await colorSouce().getFieldColorSouceList({ colourLight: value }).then(res => {
                        if (res.code === 200) {
                            selectData.colorLightList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 2:
                    //获取色系下拉列表信息
                    await colorSystem().getFieldColorSystemList({ colourScheme: value }).then(res => {
                        if (res.code === 200) {
                            selectData.colorSchemeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 3:
                    //获取打样组下拉列表信息
                    await proofGroup().getFieldProofGroupList({ proofingGroup: value }).then(res => {
                        if (res.code === 200) {
                            selectData.proofGroupList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 4:
                    //获取颜色深浅下拉列表信息
                    await colorDepth().getFieldColorDepthList({ shade: value }).then(res => {
                        if (res.code === 200) {
                            selectData.shadeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 5:
                    //获取确认色类下拉列表信息
                    await affirmColorClass().getFieldColorClassList({ affirmColorClass: value }).then(res => {
                        if (res.code === 200) {
                            selectData.colorClassList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 6:
                    //获取测试标准下拉列表信息
                    await testStandard().getSelectTestStandardList({ verifyStandard: value }).then(res => {
                        if (res.code === 200) {
                            selectData.testStandarList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 7:
                    //获取测试方法下拉列表信息
                    await testMethod().getSelectTestMethodList({ verifyMethod: value }).then(res => {
                        if (res.code === 200) {
                            selectData.testMethodList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 8:
                    //获取客户要项目下拉列表信息
                    await orderFn().getCustFieldList({ classify: value }).then(res => {
                        if (res.code === 200) {
                            selectData.custProjectList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 9:
                    //获取客户名称下拉列表信息
                    await orderFn().getCustomerList({ customName: value }).then(res => {
                        if (res.code === 200) {
                            selectData.customerNameList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 10:
                    //获取程序号 下拉列表数据
                    await orderFn().getProgramFieldList({ programNumber: value }).then(res => {
                        if (res.code === 200) {
                            selectData.programNoList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 11:
                    //获取人员下拉列表信息
                    await orderFn().getAclList({ page: 1, limit: 10000000, username: value, firmGroupId: 1285 }).then(res => {
                        if (res.code === 200) {
                            selectData.employeeList = res.data.items;
                            cb(res.data.items);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 12:
                    //获取架构人员下拉列表信息
                    await orderFn().getHrhrEmployeeList({ name: value }).then(res => {
                        if (res.code === 200) {
                            selectData.hrEmployeeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 13:
                    //获取颜色深浅下拉列表信息
                    await colorDepth().getFieldColorDepthList({ greyDepth: value }).then(res => {
                        if (res.code === 200) {
                            selectData.shadeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }

                    });
                    break;
                case 14:
                    //获取颜色深浅下拉列表信息
                    await colorDepth().getFieldColorDepthList({ yarnDepth: value }).then(res => {
                        if (res.code === 200) {
                            selectData.shadeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 15:
                    //获取作业类型
                    await orderFn().getObjVal({ jobType: value }).then(res => {
                        if (res.code === 200) {
                            selectData.objTypeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 16:
                    //获取工序名称列表
                    await orderFn().getProdProcessList({ processName: value }).then(res => {
                        if (res.code === 200) {
                            selectData.dyeProceeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 17:
                    //获取布号列表
                    await orderFn().getDevFabriList({ clothCode: value }).then(res => {
                        if (res.code === 200) {
                            selectData.clothList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 18:
                    //获取布号列表
                    await orderFn().getRawmaterials({ yarnCount: value }).then(res => {
                        if (res.code === 200) {
                            selectData.yarnCountList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 19:
                    //获取程序名称列表
                    await orderFn().getProgramNameList({ programName: value }).then(res => {
                        if (res.code === 200) {
                            selectData.programNameList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 20:
                    //获取程序名称列表
                    await orderFn().getProcessFList({ materialCode: value }).then(res => {
                        if (res.code === 200) {
                            selectData.processList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 21:
                    //获取程序名称列表
                    await orderFn().getProcessFList({ materialName: value }).then(res => {
                        if (res.code === 200) {
                            selectData.processList = res.data;
                            // console.log(res);
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
            };
        }
        /**
         * 根据布号查询 带出参数
         */
        const changeCode = async (clothCode: any) => {
            let res = await devFabricInfo().getDevFabricInfo({ clothCode, deleteState: 0 });
            if (res.code === 200) {
                let data = res.data[0];
                dataForm.ingredient = data.fabricPart;
                dataForm.descriptionName = data.brandName;
                dataForm.colourDepth = data.colorDepth;
                dataForm.jobType = data.stainType;
                dataForm.marketingMessageList[0].salesCloth = clothCode;
                dataForm.marketingMessageList[0].salesDescription = data.brandName;
            }
        };

        //计算成本
        const calcauscateCosts = () => {
            let cTotalMoney = 0;
            dataForm.battledoreMessageTwoList.forEach((v: any) => {
                let cVMoeny = 0;
                if (Array.isArray(v.battledoreMessageOneList)) {
                    v.battledoreMessageOneList.forEach((item: any) => {
                        item.money = Number(parseFloat(item.concentration * item.unitPrice).toFixed(2)) as unknown as number;
                        cTotalMoney += parseFloat(item.money);
                        cVMoeny += parseFloat(item.money);
                    });
                };
                v.costDyeing = cVMoeny;
                // console.log();
            });
            dataForm.totalCost = Number(parseFloat(dataForm.costPretreatment + cTotalMoney).toFixed(2)) as unknown as number;
        };

        const changecostPrentment = (val: any) => {
            let cTotalMoney = 0;
            dataForm.battledoreMessageTwoList.forEach((v: any) => {
                if (Array.isArray(v.battledoreMessageOneList)) {
                    v.battledoreMessageOneList.forEach((item: any) => {
                        cTotalMoney += parseFloat(item.money);
                    });
                }
            });
            dataForm.totalCost = Number(parseFloat(val + cTotalMoney).toFixed(2)) as unknown as number;
        }


        const battleOneColumns = useTableColumn([
            {
                title: '工序名称',
                key: 'processName',
                dataIndex: 'processName',
                slotName: 'processName',
                width: 100,
            },
            {
                title: '程序号',
                key: 'programNumber',
                dataIndex: 'programNumber',
                slotName: 'programNumber',
                width: 100,
            },
            {
                title: '程序名称',
                key: 'programName',
                dataIndex: 'programName',
                slotName: 'programName',
                width: 100,
            },
            {
                title: '工艺步骤',
                key: 'processingStep',
                dataIndex: 'processingStep',
                slotName: 'processingStep',
                width: 100,
            },
            {
                title: '染化料编号',
                key: 'effectsCode',
                dataIndex: 'effectsCode',
                slotName: 'effectsCode',
                width: 100,
            },
            {
                title: '染化料名称',
                key: 'effectsName',
                dataIndex: 'effectsName',
                slotName: 'effectsName',
                width: 100,
            },
            {
                title: '总浓度',
                key: 'totalConcentration',
                dataIndex: 'totalConcentration',
                slotName: 'totalConcentration',
                width: 100,
            },
            {
                title: '用料比例',
                key: 'materials',
                dataIndex: 'materials',
                slotName: 'materials',
                width: 100,
            },
            {
                title: '浓度',
                key: 'concentration',
                dataIndex: 'concentration',
                slotName: 'concentration',
                width: 100,
            },
            {
                title: '浓度单位',
                key: 'concentrationUnit',
                dataIndex: 'concentrationUnit',
                slotName: 'concentrationUnit',
                width: 100,
            },
            {
                title: '温度',
                key: 'temperature',
                dataIndex: 'temperature',
                slotName: 'temperature',
                width: 100,
            },
            {
                title: '时间',
                key: 'schedule',
                dataIndex: 'schedule',
                slotName: 'schedule',
                width: 100,
            },
            {
                title: '单价',
                key: 'unitPrice',
                dataIndex: 'unitPrice',
                slotName: 'unitPrice',
                width: 100,
            },
            {
                title: '金额',
                key: 'money',
                dataIndex: 'money',
                slotName: 'money',
                width: 100,
            },
            {
                title: '备注',
                key: 'remark',
                dataIndex: 'remark',
                slotName: 'remark',
                width: 100,
            },
            {
                title: '操作',
                key: 'action',
                dataIndex: 'action',
                slotName: "action",
                width: 100,
                fixed: "right",
            },
        ])
        const battleTwoColumns = useTableColumn([
            {
                title: '色类',
                key: 'colorclass',
                dataIndex: 'colorclass',
                slotName: 'colorclass',
                width: 100,
            },
            {
                title: '确认',
                key: 'affirm',
                dataIndex: 'affirm',
                slotName: 'affirm',
                width: 100,
            },
            {
                title: '浴比',
                key: 'desire',
                dataIndex: 'desire',
                slotName: 'desire',
                width: 100,
            },
            {
                title: '染色成本(元/公斤)',
                key: 'costDyeing',
                dataIndex: 'costDyeing',
                slotName: 'costDyeing',
                width: 100,
            },
            {
                title: '备注',
                key: 'remark',
                dataIndex: 'remark',
                slotName: 'remark',
                width: 100,
            },
            {
                title: '操作',
                key: 'action',
                dataIndex: 'action',
                slotName: "action",
                width: 100,
                fixed: "right",
            },
        ])
        const clientsColumns = useTableColumn([
            {
                title: '客户要求项目',
                key: 'informationList',
                dataIndex: 'informationList',
                slotName: 'informationList',
                width: 100,
            },
            {
                title: '客户要求值',
                key: 'customerRequiredValue',
                dataIndex: 'customerRequiredValue',
                slotName: 'customerRequiredValue',
                width: 100,
            },
            {
                title: '测试方法',
                key: 'testMethod',
                dataIndex: 'testMethod',
                slotName: 'testMethod',
                width: 100,
            },
            {
                title: '备注',
                key: 'remark',
                dataIndex: 'remark',
                slotName: 'remark',
                width: 100,
            },
            {
                title: '报客牢度',
                key: 'fastnessReporting',
                dataIndex: 'fastnessReporting',
                slotName: 'fastnessReporting',
                width: 100,
            },
            {
                title: '说明',
                key: 'explain',
                dataIndex: 'explain',
                slotName: 'explain',
                width: 100,
            },
            {
                title: '操作',
                key: 'action',
                dataIndex: 'action',
                slotName: "action",
                width: 100,
                fixed: "right",
            },
        ])
        const fanstMessColumns = useTableColumn([
            {
                title: '项目',
                key: 'project',
                dataIndex: 'project',
                slotName: 'project',
                width: 100,
            },
            {
                title: '值',
                key: 'projectValue',
                dataIndex: 'projectValue',
                slotName: 'projectValue',
                width: 100,
            },
            {
                title: '操作',
                key: 'action',
                dataIndex: 'action',
                slotName: "action",
                width: 100,
                fixed: "right",
            },
        ])
        const overMessageColumns = useTableColumn([
            {
                title: '打样员',
                key: 'sampleMaker',
                dataIndex: 'sampleMaker',
                slotName: 'sampleMaker',
                width: 100,
            },
            {
                title: '翻打日期',
                key: 'rummageDate',
                dataIndex: 'rummageDate',
                slotName: 'rummageDate',
                width: 100,
            },
            {
                title: '翻打完成日期',
                key: 'beatFinishedDate',
                dataIndex: 'beatFinishedDate',
                slotName: 'beatFinishedDate',
                width: 100,
            },
            {
                title: '备注',
                key: 'remark',
                dataIndex: 'remark',
                slotName: 'remark',
                width: 100,
            },
        ]);

        let rowChangeIndex = -1;
        //选择某一项打板信息切换 
        const changeTwoItem = (data: any) => {
            let rowIndex = data[0];
            rowChangeIndex = rowIndex;
            dataForm.battledoreMessageTwoList.forEach((v: any) => {
                // console.log(v.battledoreMessageOneList, v.rowIndex, rowChangeIndex);
                if (v.rowIndex === rowChangeIndex) {
                    let arr: any = [];
                    for (let key in v.battledoreMessageOneList) {
                        arr.push(v.battledoreMessageOneList[key])
                    };

                    pageData.battledoreMessageOneList = arr;
                }
            });
        };

        //表格数据变化
        const hasTableChange = () => {
            dataForm.battledoreMessageTwoList.forEach((v: any) => {
                if (v.rowIndex === rowChangeIndex) {
                    v.battledoreMessageOneList = pageData.battledoreMessageOneList
                }
            });
        };

        const changeClient = (data: any) => {
            //   console.log(data);
            let subText = data.substr(0, 2);
            let fiveNum: number = Math.floor(Math.random() * 100000);
            if (subText === 'YE') {
                dataForm.colourNumber = `YB-${fiveNum}`
            } else if (subText === 'YA') {
                dataForm.colourNumber = `YA-${fiveNum}`
            } else if (subText === 'ZF') {
                dataForm.colourNumber = `YE-${fiveNum}`
            } else {
                dataForm.colourNumber = `YC-${fiveNum}`
            }
        }
        // 参数初始化
        const initDate = () => {
            if (Object.values(props.dataForm).length > 0) {
                for (var key in props.dataForm) {
                    if (Array.isArray(props.dataForm[key]) && props.dataForm[key].length === 0) {
                        console.log('props.dataForm[key]')
                    } else {
                        dataForm[key] = props.dataForm[key]
                    }
                };
            } else {
                dataForm.proofingDate = dayjs(new Date()).format('YYYY-MM-DD');
                dataForm.suppliedDate = dayjs(new Date()).format('YYYY-MM-DD');
                let threeNum: number = Math.floor(Math.random() * 1000);
                let year = new Date().getFullYear().toString().substring(2);
                let mouth = (new Date().getMonth() + 1).toString().padStart(2, '0');
                let day = new Date().getDate().toString().padStart(2, '0')
                dataForm.proofingOdd = year + mouth + day + threeNum;
                dataForm.atlaSpecification = "一式三份"
                dataForm.craftDate = 330
            }
            pageData.battledoreMessageOneList = dataForm.battledoreMessageTwoList[0].battledoreMessageOneList;
            pageData.selectedKeys = [1];
        };
        initDate();

        //确认保存  
        const formRef = ref<FormInstance>();
        emitter.on('saveHandler', (callBack: any) => {
            formRef.value?.validate().then((err) => {
                if (!err) {
                    // expose({  });
                    let battledoreCraftList: any = dataForm.battledoreMessageTwoList.map((v: any) => {
                        return {
                            colorclass: v.colorclass,  //色类 
                            affirm: v.affirm, //确认
                            desire: v.desire, //浴比
                            costDyeing: v.costDyeing, //染色成本(元/公斤)
                            remark: v.remark,  //备注
                            battledoreMessageOneList: v.battledoreMessageOneList,
                            id: v.id ?? '',
                        }
                    });
                    // console.log(battledoreCraftList);
                    dataForm.battledoreMessageTwoList = battledoreCraftList;
                    callBack(true, dataForm);
                } else {
                    callBack(false)
                }
            });
        })

        let iconText: any = {
            CirclePlus
        };
        let tabsKey = ref(1);
        const changeTbs = (index: any) => {
            tabsKey.value = +index;
        };
        let programNumber = "";
        let spliceNum = 0;
        const changeBattle = (data: any, rowIndex: number) => {
            programNumber = data;
            spliceNum = rowIndex;
            selectBattle();
        };
        //根据程序号 获取打板信息 
        const selectBattle = async () => {
            if (programNumber) {
                let num = 0;
                pageData.battledoreMessageOneList.forEach((v: any) => {
                    if (v.programNumber == programNumber && programNumber) {
                        num++;
                    }
                });
                if (num > 1) {
                    Message.info({
                        content: "当前程序号的工艺信息已存在",
                        duration: 5000,
                    });
                    pageData.battledoreMessageOneList[spliceNum] = battOne
                    return;
                };
                // console.log(num);
                await orderFn().getProcessSelect({ programNumber }).then(res => {
                    if (res.code === 200) {
                        let data = res.data;
                        pageData.obListOP = res.data;
                        dataForm.dyeStrength = 0
                        dataForm.totalCost = dataForm.costPretreatment
                        pageData.obListOP.forEach((item: any) => {
                            if (item.subClassName && typeof item.subClassName === 'string' && item.subClassName.includes("染料")) {
                                dataForm.dyeStrength += item.concentration
                            }
                            dataForm.totalCost += item.money
                        })
                        if (data.length > 0) {
                            let newBattone: any = [{ ...battOne }];
                            newBattone.forEach((v: any, i: number, arr: any[]) => {
                                data.forEach((item: any, s: number) => {
                                    arr[s] = { ...v, ...item };
                                    arr[s] = {
                                        id: null,
                                        processName: arr[s].dyeProcessName,
                                        programNumber: arr[s].programNumber,
                                        programName: arr[s].programName,
                                        processingStep: arr[s].thickenerStep,
                                        effectsCode: arr[s].materialCode,
                                        effectsName: arr[s].materialName,
                                        totalConcentration: arr[s].totalConcentration,
                                        materials: arr[s].materials,
                                        concentration: parseInt(arr[s].concentration || 0),
                                        concentrationUnit: arr[s].concentrationUnit,
                                        temperature: arr[s].temperature,
                                        schedule: arr[s].expendTime,
                                        subClassName: arr[s].subClassName,
                                        unitPrice: parseInt(arr[s].price || 0),
                                        money: parseInt(arr[s].money || 0),
                                        remark: arr[s].remark,
                                    }
                                });
                            });
                            //在合适的位置插入数据
                            pageData.battledoreMessageOneList.splice.apply(pageData.battledoreMessageOneList, [spliceNum, 1].concat(newBattone));
                            let battData = data.map((v: any) => {
                                return {
                                    ...v,
                                    id: "",
                                    uId: ""
                                }
                            });
                            // console.log(dataForm.battledoreCraftList);
                            dataForm.battledoreCraftList = [...dataForm.battledoreCraftList, ...battData];

                        } else {
                            Message.info({
                                content: "该程序号暂无工艺信息",
                                duration: 5000,
                            });
                        }
                        programNumber = "";

                    } else {
                        Message.error({
                            content: "查询失败！",
                            duration: 5000,
                        });
                    }
                });
            } else {
                Message.error({
                    content: "请选择程序号",
                    duration: 5000,
                });
            }
        }

        const addCheck = () => {
            if (tabsKey.value === 1) {
                let len = dataForm.battledoreMessageTwoList.length - 1;
                battTwo.rowIndex = (dataForm.battledoreMessageTwoList[len]?.rowIndex as number) + 1;
                battTwo.battledoreMessageOneList = [{ ...battOne }];
                dataForm.battledoreMessageTwoList.push({ ...battTwo });
            } else if (tabsKey.value === 2) {
                dataForm.clientsRequirementList.push({ ...clientsMent })
            } else {
                dataForm.fastnessMessageList.push({ ...fastMess })
            }
        };

        const deleteBattTwo = (rowIndex: number) => {
            dataForm.battledoreMessageTwoList.splice(rowIndex, 1);
        }
        const changeOUT = () => {
            post({
                url: 'pdm/VerifyStandardProject/getVspAndDetail',
                data: { verifyStandard: dataForm.testStandard, demand: 1, client: dataForm.clientName }
            }).then(({ code, data, message }: any) => {
                if (code === 200) {
                    dataForm.clientsRequirementList = data
                }
            })
        }
        const changeEff = () => {
            dataForm.dyeStrength = 0
            dataForm.totalCost = dataForm.costPretreatment
            pageData.battledoreMessageOneList.forEach((item: any) => {
                if (item.subClassName && typeof item.subClassName === 'string' && item.subClassName.includes("染料")) {
                    dataForm.dyeStrength += item.concentration
                }
                dataForm.totalCost += item.money
            })

        }
        const changeConcen = () => {
            dataForm.dyeStrength = 0
            pageData.battledoreMessageOneList.forEach((item: any) => {
                if (item.subClassName && typeof item.subClassName === 'string' && item.subClassName.includes("染料")) {
                    dataForm.dyeStrength += item.concentration
                }
            })
        }
        const changeProgram = (val: any) => {
            post({
                url: 'pdm/ProcessFormula/getFirstMoney',
                data: { programNumber: val }
            }).then(({ code, data, message }: any) => {
                if (code === 200) {
                    dataForm.costPretreatment = data.money

                    if (pageData.battledoreMessageOneList.length == 0) {
                        dataForm.totalCost = dataForm.costPretreatment
                    } else {
                        dataForm.totalCost = dataForm.costPretreatment
                        pageData.battledoreMessageOneList.forEach((item: any) => {
                            dataForm.totalCost += item.money
                        })
                    }

                }
            })
        }
        const changeMoney = (val: any) => {
            dataForm.totalCost = dataForm.costPretreatment
            pageData.battledoreMessageOneList.forEach((item: any) => {
                dataForm.totalCost += item.money
            })
        }
        const searchHandler11 = (val: any) => {
            post({
                url: 'org/hrEmployee/getFieldValue1',
                data: { depName: "化验室", empName: val }
            }).then(({ code, data, message }: any) => {
                if (code === 200) {
                    selectData.employeeList = data
                }
            })
        }
        return {
            searchHandler11,
            changeMoney,
            changeProgram,
            changeConcen,
            changeEff,
            selectChangeData,
            searchHandler,
            dataForm,
            scrollbar,
            battleOneColumns,
            battleTwoColumns,
            clientsColumns,
            fanstMessColumns,
            overMessageColumns,
            selectData,
            loading,
            changeClient,
            iconText,
            battOne,
            battTwo,
            tabsKey,
            changeTbs,
            changeBattle,
            addCheck,
            selectBattle,
            deleteBattTwo,
            formRef,
            pageData,
            changeTwoItem,
            hasTableChange,
            changeCode,
            calcauscateCosts,
            changecostPrentment,
            changeOUT
        }
    }
})
</script>

<style lang="less" scoped>
.bacClass {
    background: #fff;
    border: 1px solid #c9cdd3;
    width: 270px;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.clickEvent {
    cursor: pointer;
    padding: 5px;
    text-align: center;

    &:hover {
        background-color: rgb(144 147 153 / 50%);
    }
}
</style>